<template>
    <div class="container">
        <template v-if="type === 'dynamicTv' || type === 'JL' || type === 'film'">
            <card-tv-item
                :bvid="tvInfo?.bvid"
                :aid="tvInfo?.aid"
                :cid="tvInfo?.cid"
                :title="tvInfo?.title"
                :pic="tvInfo?.pic"
                :name="tvInfo?.owner.name"
                :owner="tvInfo?.owner"
                :stat="tvInfo?.stat"
                :type="type"
            >
            </card-tv-item>
        </template>
        <template v-else-if="type === 'live'">
            <card-live-item
                :title="tvInfo?.title"
                :mid="tvInfo?.roomid"
                :cover="tvInfo?.cover"
                :uname="tvInfo?.uname"
                :area_v2_name="tvInfo?.area_v2_name"
                :watched_show="tvInfo?.watched_show"
            ></card-live-item>
        </template>
        <template v-else-if="type === 'FJ' || type === 'GC'">
            <card-fjgc-item
                :cover="tvInfo?.cover"
                :title="tvInfo?.title"
                :pub_index="tvInfo?.pub_index"
                :plays="tvInfo?.plays"
                :follows="tvInfo?.follows"
                :pub_ts="tvInfo?.pub_ts"
                :type="type"
            ></card-fjgc-item>
        </template>
        <template v-else-if="type === 'ZY'">
            <card-zy-item
                :cover="tvInfo?.cover"
                :title="tvInfo?.title"
                :sub_title="tvInfo?.sub_title"
                :plays="tvInfo?.plays"
            ></card-zy-item>
        </template>
        <template v-else>
            <card-kt-item
                :cover="tvInfo?.cover"
                :title="tvInfo?.title"
                :update_info="tvInfo?.update_info"
            ></card-kt-item>
        </template>
    </div> 
</template>

<script lang="ts" setup>
import { ref,onBeforeMount } from 'vue' 
import { getData,getMap,httpUrl,atherArr,handleFjAndGC } from '../json'
import { cardTvItem,cardLiveItem,cardFjgcItem,cardZyItem,cardKtItem } from '../components'
import { Store, useStore } from 'vuex'

type fjGc = {
    latest:Array<any>
    timeline:Array<any>
}

const store: Store<any> = useStore()
const maplist:Map<string,Array<any> | fjGc> = store.state.videoAfterCardList

const typeArr = ['dynamicTv','film','JL','GC','FJ','ZY','KT','live']      //备份数组 使用完后会继续赋值

const map:Map<string,httpUrl> = getMap()

let type = ref<string>()
let tvInfo = ref()
onBeforeMount(() =>{
    initData()
})
/**
 * 初始化数据 先在 getAfterData() 中取得数据 若当前该字段已有值 则会返回 数据
 * 有值则会直接赋值 不会异步请求接口数据
 */
function initData(){
    let { urlObj,...cardInfo }:{ urlObj:httpUrl | undefined } = { ...getAfterData() }

    if (!urlObj) {
        tvInfo.value = cardInfo 
        return
        //return baseTypeDisValue(cardInfo)
    }
    let arrx = new Promise<void>((resolve, rej) => { 
        let arr = getData(urlObj as httpUrl,type.value as string,store)
        resolve(arr),
        ref('报错啦')
    })
    arrx.then(res => {
        tvInfo.value = res
        //return baseTypeDisValue(res)
    }).catch(res => {
        alert('卡片数据加载失败')
    })
    
}
// 首先去
function getAfterData(){
    let hasArr:Array<string> = store.state.hasVideoTypeArr
    if (!hasArr.length) {
        hasArr = typeArr
    }
    let random = Math.floor(Math.random() * hasArr.length)
    type.value = hasArr[random]
    hasArr = hasArr.filter(el => el !== hasArr[random])
    store.commit('setHasVideoTypeArr',hasArr)
    if (maplist.has(type.value)){
        if (type.value !== 'GC' && type.value !== 'FJ') {
            return atherArr(type.value,store)
        } else {
            return handleFjAndGC(type.value,store)
        }
    }
    return { 'urlObj':map.get( type.value ) }
}
/**
 * 
 * @param value 传进来的数据 
 * 根据不懂类型的数据分配数据
 */
// function baseTypeDisValue(value:any){
//     if (type.value === 'dynamicTv' || type.value === 'JL' || type.value === 'film') {
//         tvInfo.value = value
//     }
// }
</script>

<style lang="scss" scoped>
.container{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: white;
    transition: all 0.5s;
    border-radius: 8px;
    &:hover{
        background-color: #F1F2F3;
    }
    &::before{
        content: '';
        position: absolute;
        background: #E3E5E7;
        width: 90%;
        height: 100%;
        bottom: -5px;
        left: 5%;
        border-radius: 10px;
        z-index: -1;
    }
    &::after{
        content: '';
        position: absolute;
        background: #F1F2F3;
        width: 80%;
        height: 100%;
        bottom: -10px;
        left: 10%;
        border-radius: 10px;
        z-index: -2;
    }
}
</style>../json